<template>
  <div class="chargethree">
    <div class="chargebox">
      <div id="container3"></div>
      <p>收费车道完好率</p>
    </div>
    <div class="chargebox">
      <div id="container4" ></div>
      <p>治超车道完好率</p>
    </div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import reslist from "../../json/position.js";
  import chartmixins from "../../chartmixins.js";

  export default {
    name: "chargethree",
    mixins: [chartmixins],
    mounted() {
      this.temperature()
      this.humidity()
    },
    methods: {
      temperature() {
        var dom = document.getElementById("container3");
        var myChart = echarts.init(dom, "dark");
        var app = {};
        var rad =78.5
        let option = null;
        option = {
          backgroundColor: "#00082F",
          color: ["#00c800", "#00082F"],
          title: {
            text: rad+'%',
            x: 'center',
            y: 'center',
            itemGap: 20,
            textStyle: {
              color: '#ffffff',
              fontFamily: '微软雅黑',
              fontSize: 18,
              // fontWeight : 'bolder'
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{d}%"
          },
          series: [
            {
              name: "占比",
              type: "pie",
              radius: ["65%", "80%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "15",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle:{
                borderColor:'#053a76',
                borderWidth:1,
              },
              data: [
                {value: rad, name: ""},
                {value: 100 - rad, name: ""}
              ]
            }
          ]
        };

        myChart.setOption(option, true);

        this.myChart = myChart;

        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },
      humidity() {
        var dom = document.getElementById("container4");
        var myChart = echarts.init(dom, "dark");
        var app = {};
        var rad = 92.8
        let option = null;
        option = {
          backgroundColor: "#00082F",
          color: ["#00c800", "#00082F"],
          title: {
            text: rad+'%',
            x: 'center',
            y: 'center',
            itemGap: 20,
            textStyle: {
              color: '#ffffff',
              fontFamily: '微软雅黑',
              fontSize: 18,
              // fontWeight : 'bolder'
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{d}%"
          },
          series: [
            {
              name: "占比",
              type: "pie",
              radius: ["65%", "80%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "15",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle:{
                borderColor:'#053a76',
                borderWidth:1,
              },
              data: [
                {value: rad, name: ""},
                {value: 100 - rad, name: ""}
              ]
            }
          ]
        };

        myChart.setOption(option, true);

        this.myChart = myChart;

        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      }
    }
  }
</script>

<style lang='scss' scoped>
  .chargethree {
    height: 100%;
    width: 100%;
    padding: 15px 20px;
    .chargebox {
      height: 50%;
      width: 100%;
      display: flex;
      flex-direction: column;
      div{
        flex:4;
        width:100%;
        height:100%;
      }
      p{
        flex:1;
        font-size: 15px;
        color:#ffffff;
        text-align: center;
        margin:0px;
      }
    }
  }

</style>
